<template>
    <div class="continer">
        <div class="topbox">
            <el-button icon="el-icon-refresh" @click="getList">刷新列表</el-button>
            <el-form :model="search" :inline="true" ref="sc" @submit.native.prevent>
                <el-form-item label="" prop="title">
                    <el-input type="text" v-model="search.title" placeholder="请输入需求标题"></el-input>
                </el-form-item>
                <el-form-item label="" prop="needs_type">
                    <el-select v-model="search.needs_type" placeholder="请选择需求类型">
                        <el-option
                        v-for="item in needTypes"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-button type="primary" class="ml_10" @click="()=>{getList()}" native-type="submit">搜索</el-button>
                <el-button @click="resetForm('sc')">重置</el-button>
            </el-form>
        </div>
        <el-table v-loading="tableload" :data="listData" row-key="id" style="width:100%" default-expand-all stripe border>
            <el-table-column label="标题" prop="title"></el-table-column>
            <el-table-column label="发布者" prop="username"></el-table-column>
            <el-table-column label="需求类型" prop="needs_type"></el-table-column>
            <el-table-column label="行业类型" prop="industry_name"></el-table-column>
            <el-table-column label="审核状态" prop="status_val"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="()=>{detail(scope.row, 1)}">查看</el-button>
                    <el-button v-if="scope.row.status==1" type="text" size="mini" @click="()=>{openExamine(scope.row)}">审核</el-button>
                    <el-button type="text" size="mini" @click="()=>{detail(scope.row, 0)}">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next, jumper"
            :total="listLen"
            :page-size="limit"
            @current-change="toPage"
            :current-page.sync="currentPage"
            class="txt_r mt_20"
        ></el-pagination>
        <el-dialog title="审核" :visible.sync="showForm" width="800px">
            <table class="detailTable">
                <tr><td class="tr">需求编号：</td><td>{{need.number}}</td></tr>
                <tr><td class="tr">标题：</td><td>{{need.title}}</td></tr>
                <tr><td class="tr">发布者：</td><td>{{need.username}}</td></tr>
                <tr><td class="tr">需求类型：</td><td>{{need.needs_type}}</td></tr>
                <tr><td class="tr">行业类型：</td><td>{{need.industry_name}}</td></tr>
                <tr><td class="tr">需求内容：</td><td>{{need.description}}</td></tr>
            </table>
            <el-form
                :model="examine"
                label-position="right"
                :rules="formRules"
                ref="sh"
                label-width="100px"
            >
                <el-form-item label="是否通过：" prop="status">
                    <el-radio-group v-model="examine.status">
                        <el-radio :label="2">通过</el-radio>
                        <el-radio :label="3">不通过</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="理由：" prop="reply">
                    <el-input type="textarea" v-model="examine.reply" rows="4"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="hideForm('sh','showForm')">取 消</el-button>
                <el-button type="primary" @click="addAlert">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="需求详情" :visible.sync="showDetail">
            <table class="detailTable">
                <tr><td class="tr">需求编号：</td><td>{{need.number}}</td></tr>
                <tr><td class="tr">标题：</td><td>{{need.title}}</td></tr>
                <tr><td class="tr">发布者：</td><td>{{need.username}}</td></tr>
                <tr><td class="tr">需求类型：</td><td>{{need.needs_type}}</td></tr>
                <tr><td class="tr">行业类型：</td><td>{{need.industry_name}}</td></tr>
                <tr><td class="tr">需求内容：</td><td>{{need.description}}</td></tr>
                <tr><td class="tr">审核状态：</td><td>{{need.status_val}}</td></tr>
                <tr v-if="need.reply"><td class="tr">理由：</td><td>{{need.reply}}</td></tr>
            </table>
        </el-dialog>
    </div>
</template>

<script>
import * as apis from "../../api/needs/needs";

export default {
    name: "instiutioin",
    data() {
        return {
            tableload:false,
            listLen: 0,
            limit: 14,
            currentPage: 1,
            // 列表
            listData: [],
            // 显示表单
            showForm: false,
            examine: {
                id: 0,
                status : 2,
                reply: ""
            },
            formRules: {
                status: [],
                reply: []
            },
            // 搜索
            search: {
                tiele: "",
                needs_type: ""
            },
            // 详情
            showDetail: false,
            need:{},
            // 需求类型
            needTypes:[]
        };
    },
    methods: {
        // 获取列表
        getList(page=1) {
            this.tableload = true;
            apis.getList({
                ...this.search,
                page: page,
                per_page: this.limit
            }).then((data)=>{
                this.tableload = false;
                if(data.code){
                    this.$message.error(data.message);
                    return;
                }
                this.listLen = data.data.total;
                this.limit = data.data.per_page;
                this.listData = data.data.data;
            }).catch(()=>{
                this.tableload = false;
                this.$message({type: "error",message: "请求失败",duration: 1800});
            });
        },
        toPage(val){
            this.currentPage = val;
            this.getList(val);
        },
        addAlert(row){
            this.$refs["sh"].validate(valid => {
                if (valid) {
                    apis.add(this.examine).then((data)=>{
                        if (data.code) {
                            this.$message({type: "error",message: data.message,duration: 1800});
                            return;
                        }
                        this.$message.success("操作成功");
                        this.examine = {id: 0,status : 2,reply: ""};
                        this.showForm = false;
                        this.getList(this.currentPage);
                    }).catch(()=>{
                        this.$message({type: "error",message: "添加失败",duration: 1800});
                    });
                }
            });
        },
        openExamine(row){
            this.examine.id = row.id;
            this.need = row;
            this.showForm = true;
        },
        detail(row, num){
            if(num == 1){
                this.need = row;
                this.showDetail = true;
            }
            if(num == 0){
                console.log(row.id);
                // delNeeds
                this.$confirm("确定删除该内容吗", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then((response)=>{
                    apis.delNeeds({id: row.id}).then((data)=>{
                        console.log(data)
                        if(data.code){
                            this.$message.error(data.message);
                            return;
                        }
                        this.$message.success("删除成功");
                        this.getList();
                    }).catch(()=>{
                        this.$message.error("删除失败");
                    })
                }).catch(()=>{
                    this.$message.info("取消删除");
                });
            }
        },
        resetForm(name){
            this.$refs[name].resetFields();
        },
        hideForm(ref,val){
            this.$refs[ref].resetFields();
            this[val] = false;
        }
    },
    created() {
        this.getList();
        apis.getNeedType().then((data)=>{
            if(data.code){return false;}
            let o = data.data.info;
            for(let i in o){
                this.needTypes.push({value:i, label:o[i]});
            }
        }).catch(()=>{});
    },
    watch:{
        examine:{
            deep: true,
            handler(){
                let b = this.examine.status==2;
                this.$set(this.formRules,"reply",b?[]:[{required: true,message: "请输入理由",trigger: "blur"}]);
            }
        }
    }
};
</script>

<style scoped>
.ml_10{margin-left:10px;}
.txt_r {text-align: right;}
.topbox {margin-bottom: 20px;}
.detailTable{font-size:16px;}
.detailTable td{padding:4px 0 22px;}
.detailTable .tr{text-align:right;padding-right:12px; padding-left:0; min-width:100px; vertical-align: top;}
.topbox{display:flex; align-items:center; justify-content: space-between;}
.topbox .el-form-item{margin-bottom:0;}
</style>
